<!--
* @author wn
* @date 2024/03/26 10:07:51
* @description: 服务对象页面
!-->
<template>
	<view v-for="item in clients" :key="item.id" class="client-box">
		<view>
			<view class="name">{{ item.name }}</view>
			<text
				:class="{
					'text-color1': item.sex === 1,
					'text-color2': item.sex === 2,
				}"
			>
				{{ item.sex === 1 ? '男' : '女' }}
			</text>
			<text class="text-margin">{{ item.age }}周岁</text>
			<text>{{ item.mobile }}</text>
		</view>
		<button plain class="my-button" @tap="onClientSelected(item)">选择</button>
	</view>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getUserClientsApi } from '@/api/client'

// 页面传递的参数
const { action } = defineProps({
	action: {
		type: String,
		default: '',
	},
})

// 修改标题
uni.setNavigationBarTitle({
	title: action === 'select' ? '请选择服务对象' : '服务对象管理',
})

onLoad(() => getUserClientsDate())

// 获取服务对象信息
const clients = ref([])
const getUserClientsDate = async () => {
	const { clients: c_res } = await getUserClientsApi()
	clients.value = c_res
}

// 选择服务人员
const onClientSelected = client => {
	// 触发全局自定义事件
	uni.$emit('clientChange', client)
	uni.navigateBack()
}
// 移除服务人员
</script>
<style lang="scss">
.client-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20rpx 20rpx 0;
	padding: 20rpx;
	background-color: #fff;
	font-weight: bold;
	border-radius: 10rpx;
	.name {
		font-size: 32rpx;
	}
	.text-margin {
		margin: 0 10rpx;
	}
	.text-color1 {
		color: #1e90ff;
	}
	.text-color2 {
		color: #da70d6;
	}
	.my-button {
		margin: 0;
		color: #1aad19;
		border-color: #1aad19;
	}
}
</style>
